<template>
  <el-dialog :model-value="visible" @update:model-value="$emit('update:visible', $event)" title="场所信息" width="500px">
    <el-form :model="form" label-width="100px" ref="formRef">
      <el-form-item label="名称" required>
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="位置" required>
        <el-input v-model="form.location" />
      </el-form-item>
      <el-form-item label="容量" required>
        <el-input-number v-model="form.capacity" :min="0" />
      </el-form-item>
      <el-form-item label="积分" required>
        <el-input-number v-model="form.points" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.active" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

defineProps({
  visible: Boolean,
  venueData: Object
})

const emit = defineEmits(['update:visible', 'submit'])

const form = ref({
  name: '',
  location: '',
  capacity: 0,
  points: 10,
  active: true
})

const submit = () => {
  emit('submit', { ...form.value })
  emit('update:visible', false)
  ElMessage.success('提交成功')
}
</script>
